<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layuiAdmin</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .g2-tooltip {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 3px;
            color: rgb(87, 87, 87);
            font-size: 12px;
            line-height: 20px;
            padding: 10px 10px 6px 10px;
            box-shadow: 0px 0px 10px #aeaeae;
        }

        .g2-tooltip-list {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        .g2-tooltip-value {
            margin-left: 30px;
            display: inline;
            float: right;
        }

        .g2-tooltip-tail {
            background-color: #f9f9f9;
            color: #909090;
            font-size: 12px;
            padding-bottom: 10px;
            margin-top: 10px;
            list-style-type: none;
            text-align: center;
            padding-top: 10px;
            cursor: pointer;
        }

        /*面包屑样式*/
        .breadcrumb {
            width: 100%;
            height: 30px;
            float: left;
            color: #8c8c8c;
            font-size: 14px;
            margin-top: 20px;
            position: absolute;
            left: 0px;
            bottom: 0px;
        }

        .breadcrumb .marker {
            width: auto;
            height: 100%;
            float: left;
            margin-right: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="topGrid">
    <div class="itemWrapper">
        <div class="item">
            <div class="name">年度销售数</div>
            <div class="number">1295</div>
            <img src="../image/topGridBg.png">
        </div>
    </div>
    <div class="itemWrapper">
        <div class="item">
            <div class="name">年度销售数</div>
            <div class="number">1295</div>
            <img src="../image/topGridBg.png">
        </div>
    </div>
    <div class="itemWrapper">
        <div class="item">
            <div class="name">年度销售数</div>
            <div class="number">1295</div>
            <img src="../image/topGridBg.png">
        </div>
    </div>
    <div class="itemWrapper">
        <div class="item">
            <div class="name">年度销售数</div>
            <div class="number">1295</div>
            <img src="../image/topGridBg.png">
        </div>
    </div>

</div>

<div id="mountNode"></div>
</body>
</html>
<script src="coffee.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script>
    var rollupData = {};
    var data = combineData(tem_fileData);
    console.log(window.innerHeight);
    console.log(window.innerWidth);
    var chart = new G2.Chart({
        container: 'mountNode',
        forceFit: false,
        width: window.innerWidth - 100,
        padding: [10, 70, 70, 50]
    });
    chart.source(data, {
        date: {
            type: 'timeCat',
            ticks: ['2010-01', '2010-04', '2010-07', '2010-10', '2011-01', '2011-04', '2011-07', '2011-10']
        }
    });
    chart.axis('date', {
        label: {
            textStyle: {
                fill: '#aaaaaa'
            }
        }
    });
    chart.axis('value', {
        label: {
            textStyle: {
                fill: '#aaaaaa'
            },
            formatter: function formatter(text) {
                return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
            }
        }
    });
    chart.legend({
        attachLast: true
    });
    chart.tooltip({
        triggerOn: 'click',
        shared: false,
        crosshairs: false,
        htmlContent: function htmlContent(title, items) {
            var dataType = items[0].name;
            var container = '<div class="g2-tooltip">';
            var titleDom = '<div class="g2-tooltip-title" style="margin-bottom: 4px;">' + title + '</div>';
            var listDom = '<ul class="g2-tooltip-list">';
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                var itemDom = '<li data-index={index}>' + '<span style="background-color:' + item.color + ';width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>' + item.name + '<span class="g2-tooltip-value">' + item.value + '</span>' + '</li>';
                listDom += itemDom;
            }
            listDom += '</ul>';
            var tailDom = '<li class="g2-tooltip-tail" data-dimension="' + dataType + '">点击下钻</li>';
            var childrenLength = Object.keys(tem_fileData[dataType].children).length;
            if (childrenLength > 0) {
                return container + titleDom + listDom + tailDom + '</div>';
            } else {
                return container + titleDom + listDom + '</div>';
            }
        }
    });
    chart.line().position('date*value').color('type').size(3);
    chart.render();
    $(document).on('click', '.g2-tooltip-tail', function () {
        var target = $(this)[0];
        drillingDown($(target));
    });

    function drillingDown($target) {
        var data_type = $target.data('dimension');
        var selected = tem_fileData[data_type];
        rollupData[data_type] = tem_fileData;
        var d = combineData(selected.children);
        if (d.length > 0) {
            chart.source(d);
            chart.repaint();
            tem_fileData = selected.children;
            //绘制面包屑
            var $breadMarker = $('<span class="marker">' + data_type + '></span>');
            $breadMarker.data('dimension', data_type);
            $('.breadcrumb').append($breadMarker);
            //点击事件
            $breadMarker.click(function () {
                var dataDim = $(this).data('dimension');
                rollingUp(dataDim);
                //remove the related bread marker
                var index = $(this).index();
                var markerNumber = $('.breadcrumb .marker').length;
                var delete_markers = [];
                for (var i = index; i < markerNumber; i++) {
                    var $marker = $('.breadcrumb').children()[i];
                    delete_markers.push($marker);
                }
                delete_markers.forEach(function (marker) {
                    marker.remove();
                });
            });
        }
    }

    function rollingUp(dimension) {
        var selected = rollupData[dimension];
        var data = combineData(selected);
        chart.source(data);
        chart.repaint();
        delete rollupData[dimension];
        tem_fileData = selected;
    }

    function combineData(data) {
        var output = [];
        for (var key in data) {
            var d = data[key];
            output = output.concat(d.data);
        }
        return output;
    }


</script>